<script lang="ts" setup>
  import { type TreeProps } from 'ant-design-vue'
  import { TreeDataItem } from 'ant-design-vue/lib/tree/Tree'
  import { computed, onMounted, reactive } from 'vue'

  import { requestGetCompanyIdentityList } from '/@/api/business/company/config'
  import IdentityDetails from '/@/components/IdentityDetails.vue'
  import { getCompanyInfo } from '/@/storage'
  const { companyId } = getCompanyInfo()
  import Empower from './components/Empower.vue'

  /** 表格配置 */
  const table = reactive({
    columns: [
      { title: '身份名称', dataIndex: 'identityName', key: 'identityName' },
      { title: '身份描述', dataIndex: 'identityDescription' },
      { title: '授权人员', dataIndex: 'userNames' },
      { title: '操作', key: 'action' },
    ],
    datas: [] as TreeProps['treeData'],
    initialLoaded: false,
    loading: false,
    expandedRowKeys: computed(() => [(table.datas as TreeDataItem[])[0]?.id.toString()]),
  })
  const searchParam = reactive({
    identityName: '',
  })

  const deepDept = (dept: PermissionListTypes.IResponse) => {
    return {
      ...dept,
      key: dept.permissionId,
      children: dept.children && (dept.children.length === 0 ? undefined : dept.children.map((child: PermissionListTypes.IResponse) => deepDept(child))),
    }
  }
  const init = async () => {
    table.loading = true
    const deep = (dept: GetCompanyIdentityListTypes.IResponse) => {
      return {
        key: dept.id,
        title: dept.name,
        children: dept.children.map((child: GetCompanyIdentityListTypes.IResponse) => deep(child)),
      }
    }
    const { responseData } = await requestGetCompanyIdentityList({ companyId, identityName: searchParam.identityName })
    table.datas = responseData.map((item: PermissionListTypes.IResponse) => deepDept(item))
    table.loading = false
    table.initialLoaded = true
  }
  onMounted(() => init())
  const reset = () => {
    searchParam.identityName = ''
  }
  const modalEmpower = reactive({
    visible: false,
    propsData: {},
    success: () => {
      init()
    },
  })
  const modalIdentityDetails = reactive({
    visible: false,
    id: '',
  })
  const check = (record) => {
    modalIdentityDetails.id = record.id
    modalIdentityDetails.visible = true
  }
  const empower = (record) => {
    modalEmpower.propsData = record
    modalEmpower.visible = true
  }
  const search = () => init()
</script>

<template>
  <div class="identity-list">
    <div class="fliter-wrap">
      <div>
        <div class="filter-item">
          <span class="filter-name">身份名称：</span>
          <a-input v-model:value="searchParam.identityName" allowClear style="width: 200px" placeholder="身份名称" />
        </div>
      </div>
      <div>
        <a-button class="filter-action" @click="reset">重置</a-button>
        <a-button class="filter-action" type="primary" @click="search()">查询</a-button>
      </div>
    </div>

    <div class="identity-list-content">
      <div class="content-name">身份权限</div>
      <a-table v-if="table.initialLoaded" :columns="table.columns" :data-source="table.datas" :defaultExpandedRowKeys="table.expandedRowKeys" :loading="table.loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="empower(record)"> 授权 </a>
              <a @click="check(record)"> 查看身份 </a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <identity-details v-model:visible="modalIdentityDetails.visible" :id="modalIdentityDetails.id" />
    <Empower v-model:visible="modalEmpower.visible" :props-data="modalEmpower.propsData" @success="modalEmpower.success" />
  </div>
</template>

<style lang="less" scoped>
  .identity-list {
    .fliter-wrap {
      border-radius: 2px;
      background: #fff;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px;

      .filter-item {
        display: inline-block;

        &:not(:nth-last-of-type(1)) {
          margin-right: 44px;
        }

        .filter-name {
          color: #000;
        }
      }

      .filter-action {
        &:not(:nth-last-of-type(1)) {
          margin-right: 8px;
        }
      }
    }

    .identity-list-content {
      border-radius: 2px;
      background: #fff;
      padding: 20px 24px;

      .content-name {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-bottom: 20px;
      }
    }
  }
</style>
